<!-- src/components/CommonPagination.vue -->
<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  pagination: {
    type: Object,
    required: true,
    default: () => ({page: 1, limit: 15, total: 0})
  }
});

const emits = defineEmits(['fetch-list']);
const fetchList = () => {
  emits('fetch-list');
};

const handleSizeChange = (size) => {
  props.pagination.page = 1;
  props.pagination.limit = size;
  fetchList();
};

const handleCurrentChange = (page) => {
  console.log('current-page', page)
  props.pagination.page = page;
  fetchList();
};
</script>

<template>
  <el-pagination
      v-model:current-page="pagination.page"
      v-model:page-size="pagination.limit"
      :page-sizes="[15, 30, 50]"
      :background="true"
      layout="total,sizes, prev, pager, next"
      :total="pagination.total"
      @update:page-size="handleSizeChange"
      @update:current-page="handleCurrentChange"
  />
</template>
